<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="4">
				<el-input placeholder="输入城市查询" v-model="filterText" size="small">
				</el-input>
				<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
					:filter-node-method="filterNode" @node-click="clickDeptNode" ref="tree">
				</el-tree>
			</el-col>
			<el-col :span="20">
				<el-form :inline="true" size="small" :model="queryForm" ref="queryForm" class="demo-form-inline">
					<el-form-item label="公司名称:" prop="repName">
						<el-input v-model="queryForm.repName"></el-input>
					</el-form-item>
					<el-form-item label="详细地址:" prop="repAddress">
						<el-input v-model="queryForm.repAddress"></el-input>
					</el-form-item>
					<el-form-item label="热线电话:" prop="repNumber">
						<el-input v-model="queryForm.repNumber"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="mini" @click="searchTableData()" icon="el-icon-search" plain>搜索
						</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQueryForm()" plain>重置</el-button>
					</el-form-item>
				</el-form>

				<el-button type="primary" icon="el-icon-plus" size="mini" @click="addPosButtonClick()" plain>新增
				</el-button>

				<el-table ref="queryForm" :data="tableData" tooltip-effect="dark">
					<el-table-column prop="id" label="维修点编号" width="180">
					</el-table-column>
					<el-table-column prop="repName" label="维修点名称">
					</el-table-column>
					<el-table-column prop="repAddress" label="联系地址">
					</el-table-column>
					<el-table-column prop="repNumber" label="联系电话">
					</el-table-column>
					<el-table-column prop="operate" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="editPosButtonClick(scope.row)" plain>修改
							</el-button>
							<el-button type="danger" size="mini" @click="delRepButtonClick(scope.row)" plain>删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryForm.PageNum" :page-sizes="[3, 5, 8]" :page-size="queryForm.pageSize"
					layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
				</el-pagination>
			</el-col>
		</el-row>

		<!--新增的弹出框-->
		<el-dialog title="新增维修点" :visible.sync="addFormVisible" width="40%">
			<el-form :model="addRepForm" hide-required-asterisk ref="addRepForm" label-width="120px">
				<el-col>
					<el-form-item label="所在省市" label-width="80px">
						<el-cascader v-model="addRepForm.repLabel" placeholder="请选择" :show-all-levels="false"
							:options="data" :props="NameData">
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="公司名称" label-width="80px">
						<el-input v-model="addRepForm.repName" placeholder="请输入公司名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="公司地址" label-width="80px">
						<el-input v-model="addRepForm.repAddress" placeholder="请输入公司地址"></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="联系电话" label-width="80px">
						<el-input v-model="addRepForm.repNumber" placeholder="请输入联系电话"></el-input>
					</el-form-item>
				</el-col>
				<el-form-item label="备注" label-width="80px">
					<el-input type="textarea" :autosize="{ minRows: 0, maxRows: 100}" placeholder="请输入内容"
						v-model="addRepForm.remark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addRep()">确 定</el-button>
			</span>
		</el-dialog>

		<!--修改的弹出框-->
		<el-dialog title="修改维修点" :visible.sync="editFormVisible" width="40%">
			<el-form :model="editRepForm" ref="editRepForm" label-width="120px">
				<el-col>
					<el-form-item label="所在省市" label-width="80px" prop="repVal">
						<el-input v-model="editRepForm.repLabel" placeholder="不可修改!" :readonly="true"></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="公司名称" label-width="80px">
						<el-input v-model="editRepForm.repName" placeholder="请输入公司名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="公司地址" label-width="80px">
						<el-input v-model="editRepForm.repAddress" placeholder="请输入公司地址" maxlength="50"></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="联系电话" label-width="80px">
						<el-input v-model="editRepForm.repNumber" placeholder="请输入联系电话" maxlength="11"></el-input>
					</el-form-item>
				</el-col>
				<el-form-item label="备注" label-width="80px" prop="remark">
					<el-input type="textarea" :autosize="{ minRows: 0, maxRows: 100}" placeholder="请输入内容"
						v-model="editRepForm.remark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="editRep()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				editRepForm: {
					id: '',
					repLabel: '',
					repVal: '',
					pid: '',
					remark: '',
					repName: '',
					repAddress: '',
					repNumber: '',
					repCity: '',
					repPro: '',
					updateTime: '',

				},
				//修改框的可见性
				editFormVisible: false,
				RepData: [],
				NameData: {
					label: 'repVal',
					value: 'repLabel',
					children: 'childs',
					emitPath: false,
					checkStrictly: true
				},
				// 新增框的可见性
				addFormVisible: false,
				addRepForm: {
					id: '',
					id: '',
					repLabel: '',
					repVal: '',
					pid: '',
					remark: '',
					repName: '',
					repAddress: '',
					repNumber: '',
					repCity: '',
					repPro: '',
					createTime: '',
					updateTime: '',

				},

				filterText: '',
				//选择结果
				props: {
					id: 'repLabel',
					children: 'childs',
					label: 'repVal',
					emitPath: false,

				},
				//树形展示
				data: [],
				// 树形对照关系
				defaultProps: {
					id: 'repLabel',
					children: 'childs',
					label: 'repVal',
				},
				tableData: [],
				queryForm: {
					id: '',
					repName: '',
					repAddress: '',
					repNumber: '',
					repCity: '',
					repPro: '',
					createTime: '',
					updateTime: '',
					PageNum: 1,
					pageSize: 5
				},
				// tabledata中总的数量
				totalNum: 0,
				value1: [],
				repData: {
					id: '', //id为自增 
					repName: '',
					repAddress: '',
					repNumber: '',
					repCity: '',
					repPro: '',
					createTime: '',
					updateTime: ''
				}
			}
		},
		methods: {
			//删除
			delRepButtonClick(row) {
				console.log(row);
				this.$confirm(`此操作将永久删除名称为 ${row.repName} 的数据,, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`repair/deleteById/${row.id}`).then(resp => {
						console.log(resp);
						this.getSelectTableData(this.queryForm);
					});
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//修改按钮点击
			editPosButtonClick(row) {
				console.log(row);
				this.editFormVisible = true;
				// this.editRepForm = JSON.parse(JSON.stringify(row));
				this.editRepForm = row;
			},
			//修改
			editRep() {
				this.editFormVisible = false;
				this.$axios.put(`repair/update`, this.editRepForm)
					.then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '修改成功'
							});
						} else {
							this.$message({
								type: 'error',
								message: '修改失败'
							});
						}
						this.getSelectTableData(this.queryForm);
					});

			},
			//新增按钮触发
			addPosButtonClick() {
				this.resetaddFrom();
				this.addFormVisible = true;
			},
			//重置新增表单
			resetaddFrom() {
				this.addRepForm = {
					id: '',
					id: '',
					repLabel: '',
					repVal: '',
					pid: '',
					remark: '',
					repName: '',
					repAddress: '',
					repNumber: '',
					repCity: '',
					repPro: '',
					createTime: '',
					updateTime: '',

				};

			},
			//添加维修点
			addRep() {
				this.addFormVisible = false;
				console.log(this.addRepForm);
				this.$axios.post('/repair/insert', this.addRepForm)
					.then(resp => {
						console.log(resp);
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '新增成功'
							});
						} else {
							this.$message({
								type: 'error',
								message: '新增失败'
							});
						}
						this.getSelectTableData(this.queryForm);
					});

			},
			filterNode(value, data) {
				if (!value) return true;
				return data.repVal.indexOf(value) !== -1;
			},
			// 得到省树形图
			getAllPro() {
				this.$axios.get("/repair/repTree")
					.then(resp => {
						if (resp.code == 20000) {
							this.data = resp.data;
							console.log(this.data)
							console.log(resp.data.repVal)
							console.log(resp.data.pid)
						}
					})
			},
			//点击树形节点触发的点击事件
			clickDeptNode(data) {
				this.queryForm.repName = '',
					this.queryForm.repAddress = '',
					this.queryForm.repNumber = '',
					this.queryForm.repCity = '',
					this.queryForm.repPro = '',
					this.queryForm.repCity = data.repLabel;
				this.getSelectTableData(this.queryForm);
			},

			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.getSelectTableData(this.queryForm);
			},
			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getSelectTableData(this.queryForm);
			},

			//点击搜索触发的事件
			searchTableData() {
				console.log(this.queryForm);
				this.getSelectTableData(this.queryForm);
			},
			// 重置查询框
			resetQueryForm() {
				this.value1 = [];
				this.resetRepData();
				this.getSelectTableData(this.queryForm);
			},
			resetRepData() {
				this.queryForm = {
					id: '',
					repName: '',
					repAddress: '',
					repNumber: '',
					repCity: '',
					repPro: '',
					createTime: '',
					updateTime: '',
					PageNum: 1,
					pageSize: 5

				}
			},

			getTableData() {
				this.$axios.get("/repair/getList")
					.then(resp => {
						console.log(resp);
						this.tableData = resp.list;
						this.totalNum = resp.total;
					})
			},
			getSelectTableData(searchData) {
				this.$axios.get("/repair/select", {
						params: searchData
					})
					.then(resp => {
						console.log(resp);
						this.tableData = resp.list;
						this.totalNum = resp.total;
					})
			}
		},
		mounted() {
			this.getAllPro();
			this.getSelectTableData(this.queryForm);
			this.$axios.get("/repair/repTree")
				.then(resp => {
					console.log(resp);
					if (resp.code == 20000) {
						this.repData = resp.data;

					}
				});
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		}

	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.fr {
		float: right;
	}
</style>
